<template>
	<div
		class="mt-1 h-10 rounded-sm overflow-hidden relative pl-4 pr-1 flex justify-between items-center"
		:class="data ? 'bg-bg-3' : 'bg-bg-3'">
		<template v-if="data">
			<div class="absolute h-full left-0 w-[6px] bg-success"></div>
			<div class="flex-1 w-1">
				<betslip-info-single
					v-if="data.type === BettingMethod.single"
					:data="singleData"
					:selection="singleSelection!"></betslip-info-single>
				<betslip-info-combo
					v-else
					:data="comboData"
					:selections="comboSelection!"></betslip-info-combo>
			</div>
			<div
				class="ml-1 w-8 h-8 rounded-full bg-primary text-white flex justify-center items-center"
				@click="onDescription">
				<base-icon name="feedback" class="text-[16px]"></base-icon>
			</div>
		</template>
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import BetslipInfoSingle from '../betslip-info/betslip-info-single.vue'
import BetslipInfoCombo from '../betslip-info/betslip-info-combo.vue'
import { BetslipItemType, BetslipComboType, BetslipBaseType } from '@/types'
import { computed, PropType } from 'vue'
import { useFeedStore } from '@/store'
import { BettingMethod } from '@/enums'

const props = defineProps({
	data: {
		type: Object as PropType<BetslipBaseType>
	}
})

const feedStore = useFeedStore()

const singleData = computed(() => {
	return props.data as BetslipItemType
})

const comboData = computed(() => {
	return props.data as BetslipComboType
})

const singleSelection = computed(() => {
	if (props.data?.order?.selections?.length) {
		return props.data.order?.selections[0]
	}
	return null
})

const comboSelection = computed(() => {
	if (props.data?.order?.selections) {
		return props.data.order?.selections
	}
	return null
})

const onDescription = () => feedStore.showDescription(props?.data?.order?.orderNo)
</script>
